<template>
<div v-if="store.isLogin">
  <el-container>
    <el-header>
      <div class ="account">
        <p>当前用户：</p>
      </div>
    <el-button  @click="backtoSignIn">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="true">
            <el-icon><ArrowLeftBold /></el-icon>
          </el-radio-button>
          <el-radio-button :label="false">
            <el-icon><ArrowRightBold /></el-icon>
          </el-radio-button>
        </el-radio-group>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>IP权限管理</span>
            </template>
            <el-menu-item index="1-1" @click="definePrivilege">
              <el-icon><CirclePlus /></el-icon>
              <span>IP权限定义</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="showPrivilege">
              <el-icon><List /></el-icon>
              <span>IP权限查询</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>


<script setup lang="ts">
import { Setting, CirclePlus, List, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { RouterLink, useRouter, useRoute } from "vue-router"
import { ref, watchEffect } from "vue"
import { useStore } from '../store'

const router = useRouter()
const route = useRoute()
const store = useStore()

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const isCollapse = ref(false)

function definePrivilege() {
  router.push({name: "definePrivilege"})
}
function showPrivilege() {
  router.push({name: "showPrivilege"})
}
function backtoSignIn() {
  store.logOut()
  router.push("/")
}
</script>

<style lang ="css">
.account{
  margin: auto;
  float:right;
}
</style>




